<template>
  <div class="study-word">
    <div class="study-word-false">
      <div class="word-name">
        <span class="click" @click="playAudio('audioPlay')">
          <span
            :class="isPlay ? 'strong-name' : ''"
            v-if="isCheckedFirst || category !== 1"
          >
            {{ wordData.name }}
            <i v-if="wordData.phonetic"> [{{ wordData.phonetic }}] </i>
          </span>
          <span class="info-text" v-else> 请听读音 </span>
        </span>
        <AudioPlay
          class="fr click"
          ref="audioPlay"
          :type="1"
          :audioSrc="baseURL + wordData.audioURL"
          @onIsPlay="onIsPlayWord"
        ></AudioPlay>
      </div>
      <div class="word-line"></div>
      <div class="flex-space-be pb20">
        <div class="word-paraphrase">
          <div v-if="isCheckedFirst">
            <p v-for="(item, index) in wordData.paraphrase" :key="index">
              {{ item }}
            </p>
          </div>
        </div>
        <div class="word-info-img">
          <div class="word-img">
            <img
              v-if="isCheckedFirst && wordData.imgURL"
              :src="baseURL + wordData.imgURL"
              alt=""
            />
          </div>
          <div class="check-btn" v-if="!isCheckedFalse && !isCheckedFirst">
            <div
              class="next-btn mt20 click"
              @click="
                isCheckedFirst = true;
                closeTimer();
              "
            >
              <!-- <img src="@/assets/img/star-true.png" alt="" /> -->
              <img src="@/assets/img/ch-yes.png" alt="" />
            </div>
            <div class="next-btn mt20 click" @click="checkTrueFun(false)">
              <!-- <img src="@/assets/img/star-false.png" alt="" /> -->
              <img src="@/assets/img/ch-no.png" alt="" />
            </div>
          </div>
          <div class="check-btn" v-if="!isCheckedFalse && isCheckedFirst">
            <div class="next-btn mt20 click" @click="checkTrueFun(true)">
              <!-- <img src="@/assets/img/star-yes.png" alt="" /> -->
              <img src="~@/assets/img/naturalSpell/yes.png" alt="">
            </div>
            <div class="next-btn mt20 click" @click="checkTrueFun(false)">
              <!-- <img src="@/assets/img/star-no.png" alt="" /> -->
              <img src="~@/assets/img/naturalSpell/no.png" alt="">
            </div>
          </div>
          <div class="img-next" v-if="isCheckedFalse">
            <div v-if="countDown == 2" @click="countDownFun" class="next-btn">
              <img src="@/assets/img/memory-2.png" alt="" />
            </div>
            <div v-if="countDown == 1" @click="countDownFun" class="next-btn">
              <img src="@/assets/img/memory-1.png" alt="" />
            </div>
            <div v-if="countDown == 0" @click="countDownFun" class="next-btn">
              <img src="@/assets/img/memory-next.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div
        class="word-example"
        v-if="
          isCheckedFirst &&
          wordData.exampleList &&
          wordData.exampleList.length > 0
        "
      >
        <label>例句</label>
        <div class="word-example-list">
          <div>
            <p class="example-text">
              {{ wordData.exampleList[0].example_name }}
              <AudioPlay
                class="ml10 click"
                ref="exampleAudio"
                :type="2"
                :audioSrc="
                  'https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=1&pdt=301&rate=32&per=0&tex=' +
                  wordData.exampleList[0].example_name
                "
                v-if="false"
              ></AudioPlay>
              
            </p>
            <!-- :audioSrc="
                  'https://tts.baidu.com/text2audio?lan=en&ie=UTF-8&spd=2&text=' +
                  wordData.exampleList[0].example_name
                " -->
            <p>{{ wordData.exampleList[0].translate }}</p>
          </div>
          <div
            class="more-example"
            v-if="wordData.exampleList.length > 1"
            @click="dialogExampleVisible = true"
          >
            查看更多例句>>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="例句" :visible.sync="dialogExampleVisible">
      <div class="word-example-list">
        <div
          class="pb20"
          v-for="(example, index) in wordData.exampleList"
          :key="example.id"
        >
          <p class="example-text">
            <span> {{ example.example_name }}</span>
            <!-- <img
              class="ml15 click"
              @click="playArrayAudio('exampleAudio' + index)"
              src="../assets/img/icon-audio-or.png"
              alt=""
            /> -->
            <AudioPlay
              class="ml10 click"
              :ref="'exampleAudio' + index"
              :type="2"
              :audioSrc="
                'https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=1&pdt=301&rate=32&per=0&tex=' +
                example.example_name
              "
              v-if="false"
            ></AudioPlay>
          </p>
          <p>{{ example.translate }}</p>
          <!-- <audio
            :ref="'exampleAudio' + index"
            :src="
              'https://tts.baidu.com/text2audio?lan=en&ie=UTF-8&spd=4&text=' +
              example.example_name
            "
          ></audio> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/**
 *    item.id = item.word_id; //ID
      item.name = item.word_name; //单词
      item.phonetic = item.phonetic_american; //音标
      item.imgURL = ""; //图片
      item.exampleList = []; //例句
      item.audioURL = item.us_url; //音频
      paraphrase//释义
 */
import AudioPlay from "@/components/AudioPlay";
import { throttle } from "@/utils/utils";
export default {
  name: "studyWord",
  data() {
    return {
      isCheckedFalse: false,
      isCheckedFirst: false,
      dialogExampleVisible: false,
      countDown: 2,
      isPlay: false,
    };
  },
  methods: {
    onIsPlayWord(isPlay) {
      this.isPlay = isPlay;
    },
    playAudio(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].playAudio();
      }
      console.log(this.wordData,"wordData");
    },
    closeTimer() {
      this.$emit("closeTimer");
    },
    playArrayAudio(refName) {
      this.$pauseAllAudio();
      if (this.$refs[refName] && this.$refs[refName][0]) {
        this.$refs[refName][0].play();
      }
    },
    nextWord() {
      this.$emit("checkFalseFun", this.wordData.checkedAnswer, () => {
        this.$emit("nextWord");
      });
    },
    initCompon() {
      this.isCheckedFalse = false;
      this.isCheckedFirst = false;
      this.countDown = 2;
    },
    // checkFalseFun: throttle(function () {
    //   this.isCheckedFirst = true;
    //   this.isCheckedFalse = true;
    //   this.wordData.checkedAnswer = false;
    //   // this.$emit("checkFalseFun", false);
    // }, 2000),
    checkTrueFun: throttle(function (checkedAnswer) {
      if (checkedAnswer) {
        this.wordData.checkedAnswer = true;
        this.nextWord();
      } else {
        this.isCheckedFirst = true;
        this.isCheckedFalse = true;
        this.wordData.checkedAnswer = false;
      }
    }, 2000),

    countDownFun: throttle(function () {
      if (this.countDown > 0) {
        this.countDown--;
        this.playAudio("audioPlay");
      } else {
        this.nextWord();
      }
    }, 2000),
  },
  components: {
    AudioPlay,
  },
  created() {
    this.initCompon();
  },
  mounted() {},
  props: {
    wordData: {
      type: Object,
    },
    category: {
      type: Number,
    },
  },
  watch: {
    wordData() {
      this.initCompon();
    },
  },
};
</script>

<style scoped>
.check-btn{
  margin-top: 20px;
  width: 158px !important;
}
</style>